<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>日志列表</span>
      </div>
      <el-row>
        <el-form :inline="true" :model="form">
          <el-form-item>
            <el-input v-model="form.id" placeholder="日志编号"></el-input>
          </el-form-item>

          <el-form-item>
            <daterange v-bind:se.sync="s_e" type="daterange"></daterange>
          </el-form-item>

          <el-form-item>
            <el-input
              v-model="form.release_name"
              placeholder="创建人"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.question_title"
              placeholder="任务名称"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item >
				<el-input v-model="form.status" placeholder="处理状态"></el-input>
			</el-form-item> -->
          <el-form-item>
            <el-select v-model="form.status" placeholder="处理状态">
              <el-option
                v-for="(item, index) in status_select_label"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- <el-input v-model="form.grid_id" placeholder="创建网格id"></el-input> -->
            <el-cascader
              style="width: 400px"
              filterable
              :options="treedata"
              :props="props1"
              filterable
              change-on-select
              v-model="selectedOptions"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="init">查询</el-button>
          </el-form-item>
          <!-- <el-form-item>
				<el-button type="success" @click="add">创建</el-button>
			</el-form-item> -->
        </el-form>
      </el-row>

      <el-row>
        <el-table
          :data="list.results"
          :header-cell-style="{
            'background-color': '#f4f4f5',
            color: '#616161',
          }"
          border
          style="width: 100%"
        >
          <el-table-column prop="id" label="日志编号"> </el-table-column>
          <el-table-column prop="task_type" label="类型">
            <template slot-scope="scope">
              {{ task_type_label[parseInt(scope.row.task_type)] }}
            </template>
          </el-table-column>
          <el-table-column prop="question_title" label="任务名称">
          </el-table-column>
          <el-table-column prop="grid_names" label="创建网格">
          </el-table-column>
          <el-table-column prop="release_name" label="创建人">
          </el-table-column>
          <el-table-column label="处理状态">
            <template slot-scope="scope">
              {{ status_label[parseInt(scope.row.status)] }}
            </template>
          </el-table-column>
          <el-table-column prop="handler_grid_name" label="当前处理人">
          </el-table-column>
          <el-table-column prop="release_time" label="任务创建时间">
          </el-table-column>

          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                icon="el-icon-view"
                circle
                @click="edit(scope.row)"
              >
              </el-button>
              <!-- <el-button type="danger" size="mini" 
	      		icon="el-icon-delete" circle
	      		@click="del(scope.row)">
	      		</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-row class="text-right mt20 mb20">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="list.totalRecord"
        >
        </el-pagination>
      </el-row>
    </el-card>

    <el-dialog
      :title="current.info.question_title"
      :visible.sync="dialogVisible"
      width="900px"
    >
      <eventinfo :obj="current"></eventinfo>

      <!-- <el-tabs v-model="activeName2" type="card" >
	    <el-tab-pane label="事件详情" name="first">
	    	<eventinfo :obj="current"></eventinfo>
	    </el-tab-pane>
	    <el-tab-pane label="事件流程" name="second" v-if="current.flow">
	    	<flowinfo :obj="current" ></flowinfo>
	    </el-tab-pane>
	</el-tabs> -->

      <!-- <el-form ref="form" :model="current" label-width="180px">

		<el-form-item label="标题："  >
			<el-input v-model="current.title" style="width:400px;"></el-input>
		</el-form-item>

		<el-form-item label="内容："  >
			<el-input type="textarea" v-model="current.content" style="width:400px;"></el-input>
		</el-form-item>

	</el-form> -->

      <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">保 存</el-button>
  </span> -->
    </el-dialog>
  </div>
</template>

<script>
import daterange from "@/components/daterange";
import eventinfo from "./info";
import flowinfo from "./flow";

export default {
  name: "eventList",

  data() {
    return {
      list: {},

      form: {},

      pageNo: 1,
      pageSize: 10,

      current: {
        info: {},
        flow: {},
      },

      dialogVisible: false,

      task_type_label: ["", "紧急任务", "普通", "检查", "日常"],

      status_label: ["", "处理中", "已完成"],

      s_e: [this.$util.date2str(new Date()), this.$util.date2str(new Date())],

      props1: {
        value: "id",
        label: "name",
      },

      treedata: [],

      selectedOptions: [1],

      activeName2: "first",

      status_select_label: [
        { label: "全部", value: undefined },
        { label: "处理中", value: "1" },
        { label: "已完成", value: "2" },
      ],
    };
  },

  props: {},

  components: {
    daterange,
    eventinfo,
    flowinfo,
  },

  computed: {},

  methods: {
    init() {
      console.log("selectedOptions");
      console.log(this.selectedOptions);

      this.$http({
        fun: "eventList",
        //requestType : 'get',
        ...this.form,
        start_time: this.s_e[0] + " 00:00:00",
        end_time: this.s_e[1] + " 23:59:59",
        grid_id: this.selectedOptions[this.selectedOptions.length - 1] + "",
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        cb: (res) => {
          console.log(res);
          this.list = res;
        },
      });
    },

    add() {
      this.dialogVisible = true;
      this.current = {};
    },

    edit(item) {
      console.log(item);
      this.$http({
        fun: "eventInfo",
        id: item.id,
        cb: (res) => {
          this.$http({
            fun: "flowList",
            id: item.id,
            cb: (res1) => {
              console.log("ffffffff");
              console.log(res);
              console.log(res1);

              res1.forEach((item) => {
                if (item.params == undefined || item.params == "") {
                  item["paramsobj"] = {
                    content: "",
                  };
                } else {
                  item["paramsobj"] = JSON.parse(item.params);
                }

                // if(item.handle_time == undefined){
                // 	item.handle_time = this.$util.date2str(new Date()) + ' 23:59:59';
                // }
              });

              this.current = {
                info: {
                  ...res,
                  imgs: res.question_img ? res.question_img.split(",") : [],
                  videos: res.question_video
                    ? res.question_video.split(",")
                    : [],
                },
                flow: res1,
              };
              console.log(this.current);
              this.activeName2 = "first";
              this.dialogVisible = true;
            },
          });
        },
      });
    },

    del(item) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            fun: "createHelp",
            id: item.id,
            del_flag: 1,
            cb: (res) => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.init();
            },
            err: (res) => {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            },
          });
        })
        .catch(() => {});
    },

    save() {
      this.$http({
        fun: "createHelp",
        ...this.current,
        cb: (res) => {
          console.log(res);
          this.$message.success("操作成功");
          this.dialogVisible = false;
          this.init();
        },
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.init();
    },

    handleCurrentChange(val) {
      this.pageNo = val;
      this.init();
    },
  },

  watch: {},

  mounted() {
    this.init();

    this.$http({
      fun: "grideList",
      cb: (res) => {
        console.log(res);

        const result = this.$util.transData(res, "id", "parent_id", "children");
        console.log(result);
        this.treedata = result;
        this.treedata.unshift({
          name: "全部网格",
          id: 1,
        });
      },
    });
  },
};
</script>

<style scoped>
</style>
